<template>
	<view class="container">
		<u-input placeholder="我想..." :showConfirmbar="false" placeholderStyle="color: #888;"/>
		<view class="line" />
		<editor id="editor" ref="editor" class="ql-container" placeholder="添加备忘" />
		<view class="todo-desc">
			<view class="" v-show="time">
				{{time}}
			</view>
			<view class="">
				前往 天河区体育中心101会展楼
			</view>
		</view>
		
		<u-picker @confirm="selectRepat" v-model="showRepeat" :default-selector="[repeatIndex]" :range="repeats" range-key="cateName" mode="selector" :safe-area-inset-bottom="true"></u-picker>
		<u-picker @confirm="selectTime" v-model="showClock" :defaultTime="defaultTime" :params="params" :safe-area-inset-bottom="true"/>
		
		<view class="tool-view">
			<view class="tool">
				<!-- <i class="iconfont icon icon-hashjinghao" @click="addTag" /> -->
				<i class="iconfont icon icon-ditu" @click="mapTap" />
				<i :class="['iconfont icon icon-naozhong', time?'i-active':'']"  @touchend="clockTap" />
				<i :class="['iconfont icon icon-repeat', repeatIndex!=0?'i-active':'']" @tap="repeatTap" />
				<i class="iconfont icon icon-color-palette" :style="{color: colorDot}" @tap="selectColor" />
				<!-- <i :class="['iconfont icon icon-shixinyuanxing', formats.list=='bullet'?'i-active':'']" data-name="list" data-value="bullet" @tap="formatTap" /> -->
				<view style="position: absolute;right: 32rpx;background-color: #ae80ff;border-radius: 10rpx;">
					<i class="iconfont icon icon-fasong1" style="color: #FFFFFF"/>
				</view>
			</view>
		
			<view class="color-dot-mask" v-if="showColor" @click="selectColor"></view>
			<view v-if="showColor">
				<!-- bounceInUp -->
				<gal-css-animate animateName="fadeInUp" duration=".4s" timingFunction="ease-in-out">
					<view class="color-dot">
						<i style="color: #B7C0F2" :class="['iconfont icon icon-color-dot', colorDotIndex==1?'color-active':'']" data-i="1" data-value="#B7C0F2" @tap="colorTap" /> 
						<i style="color: #B2EC9C" :class="['iconfont icon icon-color-dot', colorDotIndex==2?'color-active':'']" data-i="2" data-value="#B2EC9C" @tap="colorTap" /> 
						<i style="color: #FAD48D" :class="['iconfont icon icon-color-dot', colorDotIndex==3?'color-active':'']" data-i="3" data-value="#FAD48D" @tap="colorTap" /> 
						<i style="color: #FABBB3" :class="['iconfont icon icon-color-dot', colorDotIndex==4?'color-active':'']" data-i="4" data-value="#FABBB3" @tap="colorTap" /> 
						<i style="color: #CDD277" :class="['iconfont icon icon-color-dot', colorDotIndex==5?'color-active':'']" data-i="5" data-value="#CDD277" @tap="colorTap" /> 
						<i style="color: #C1F1DB" :class="['iconfont icon icon-color-dot', colorDotIndex==6?'color-active':'']" data-i="6" data-value="#C1F1DB" @tap="colorTap" /> 
					</view>
				</gal-css-animate>
			</view>

			
		</view>
	</view>
</template>

<script>
	export default {
		name:"c-todo-edit",
		data() {
			return {
				showClock: false,
				showRepeat: false,
				repeats: [
					{
						cateName: '不提醒',
						id: 0
					},
					{
						cateName: '提醒一次',
						id: 1
					},
					{
						cateName: '每天提醒',
						id: 2
					},
					{
						cateName: '每周提醒',
						id: 3
					},
					{
						cateName: '每月提醒',
						id: 4
					},
					{
						cateName: '工作日提醒',
						id: 5
					}
				],
				repeatIndex: 0,
				time: '',
				defaultTime: '',
				showColor: false,
				colorDot: '',
				colorDotIndex: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					weekday: true
				},
				local_addr: ''
			}
		},
		created() {
			wx.getLocation({
				type: 'gcj02',
				success: (res) => {
					const { latitude, longitude } = res
					this.local_addr = JSON.stringify({ latitude, longitude })
				}
			})
		},
		methods: {
			clockTap(e) {
				this.showClock = true
			},
			selectTime(e) {
				const { year, month, day, hour, minute, weekday } = e
				this.defaultTime = `${year}-${month}-${day} ${hour}:${minute}`
				this.time = `${year}-${month}-${day} ${weekday[1]} ${hour}:${minute}`
			},
			
			repeatTap() {
				this.showRepeat = true
			},
			selectRepat(e) {
				this.repeatIndex = e[0]
			},
			
			colorTap (e) {
				let { index, value } = e.target.dataset
				this.colorDotIndex = index
				this.colorDot = value
			},
			selectColor() {
				this.showColor = !this.showColor;
			},
			
			mapTap() {
				const local_addr = this.local_addr
				if (local_addr) {
					const category = '' // '文化场馆,生活服务,美食' // 购物,超市,便利店'
					wx.navigateTo({  
					  url: 'plugin://chooseLocation/index?key=5YLBZ-RR4CU-KVVVM-B3FPT-N7WZ6-F7FQU&referer=TODO&location=' + local_addr +'&scale=' + 18 +'&category=' + category
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 140rpx;
}
.ql-container {
	line-height: 160%;
	font-size: 28rpx;
	height: 320rpx;
	min-height: 32rpx;
	padding: 10rpx;
	margin: 0 auto;
} 
.line {
	border-top: solid 2rpx #dde4ef;
}

.todo-desc {
	// min-height: 120rpx;
	// padding: 20rpx;
	// background-color: #fdfdfd;
	border-radius: 20rpx;
	font-size: 20rpx;
	line-height: 28rpx;
}

.tool-view{
	width: 100vw;
	position: fixed;
	left: 0;
}
.tool {
	height: 100rpx;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	
	i {
		width: 100rpx;
		font-size: 48rpx;
		text-align: center;
	}
}

.i-active {
  color: #9068be;
}


.color-dot {
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: 100rpx;
	background: #fff;
	width: calc(100% - 90rpx); 
	left: 45rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	border-radius: 16rpx;
}
.icon-color-dot {
	font-size: 56rpx;
	padding: 20rpx 20rpx;
}
.color-dot-mask{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: transparent;
}
</style>
